page-webcast-playback-list {
    $default-color: #1f212a;
    $color-font: #35ac63;
    $blue-green-color:#12a89f;
    $gray-color:#999999;
    $white:#fff;
    $gray-shadow-color:#ddd;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        ion-title {
            height: 100%;
            padding: 0 computed-vw(150);
        }
    }
    .fixed-bar {
        background-color: #fff;
        width: 100%;
        height: computed-vw(140);
        font-size: computed-vw(42);
        color: $default-color;
        padding: computed-vw(30) computed-vw(60);
        position: relative;
        -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        span {
            float: left;
            line-height: computed-vw(82);
        }
        .playback-num {
            width: computed-vw(280);
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            color: #333333;
        }

        .button-ios {
            margin: 0;
            padding: 0;
            width: computed-vw(180);
            height: computed-vw(80);
            color: #fff;
            border-radius: computed-vw(40);
            float: left;
            font-size: computed-vw(36);
        }
        .filter-type {
            width: computed-vw(246);
            margin-right: computed-vw(20);
            position: absolute;
            right: computed-vw(260);
            background-color: $blue-green-color;
            text-align: center;
            border-radius: computed-vw(40);
            i {
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                background-image: url('../assets/images/webcast/icon_time_down.png');
                background-size: 100% 100%;
                margin-right: -1.1vw;
            }
            &_up{
                i{
                    background-image: url('../assets/images/webcast/icon_time_up.png');
                }
            }
        }
        .filter-btn {
            background-color: #3dab4a;
            position: absolute;
            right: computed-vw(60);
            i {
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                background-image: url('../assets/images/webcast/icon_filtrate.png');
                background-size: 100% 100%;
                margin-right: computed-vw(6);
            }
        }

        .expand-bar {
            position: absolute;
            width: 0;
            height: 1px;
            left: computed-vw(750);;
            bottom: 0;
            transform: translateX(-50%);
            transition: all .4s ease-in-out;
            background-color: #35ac63;
            &_open {
                width: computed-vw(400);
            }
        }

        .expand-select {
            position: absolute;
            top: computed-vw(141);
            transition: all .4s ease-in-out;
            max-height: 0;
            background-color: #fff;
            width: computed-vw(400);
            right: computed-vw(130);
            overflow: hidden;
            text-align: center;
            z-index: 20;
            box-shadow: computed-vw(10) computed-vw(10) computed-vw(40) rgba(0, 0, 0, .1);
            &_open {
                max-height: computed-vw(1000);
            }
        }

        .expand-option {
            color: #666666;
            font-size: computed-vw(36);
            height: computed-vw(120);
            line-height: computed-vw(120);
            padding: 0 computed-vw(60);
            border-bottom: computed-vw(1) solid rgb(239, 239, 240);
            &_selected {
                color: #35ac63;
            }
        }
    }

    .scroll-content {
        background-color: rgb(243, 243, 243);
    }

    .play-img-btn {
        position: absolute;
        left: computed-vw(110);
        top: computed-vw(64);
        width: computed-vw(96);
        height: computed-vw(96);
        background: url('../assets/images/webcast/icon_paly.png') no-repeat center ;
        background-size: computed-vw(96);
    }

    .card-list {
        padding: computed-vw(60);
        .empty {
            color: #999;
            background-color: #fff;
            border-radius: computed-vw(10);
            padding: computed-vw(60);
            text-align: center;
        }
        .playback-item:first-child{
            margin-top: computed-vw(28);
        }
        .playback-item{
            padding-left: 0;
            height: computed-vw(225);
            position: relative;
            margin-bottom: computed-vw(60);
            display: flex;
            flex-wrap: nowrap;
            background: $white;
            -webkit-box-shadow: 1px 1px 10px $gray-shadow-color;
            -moz-box-shadow: 1px 1px 10px $gray-shadow-color;
            box-shadow: 1px 1px 10px $gray-shadow-color;
            .playback-image{
                width: computed-vw(315);
                height: computed-vw(225);
                position: relative;
                display: inline-block;
            }
            .play-btn{
                position: absolute;
                left: computed-vw(110);
                top: computed-vw(64);
                width: computed-vw(96);
                height: computed-vw(96);
                background: url('../assets/images/webcast/icon_paly.png') no-repeat center;
                background-size: computed-vw(96);
            }
            .right-info{
                position: absolute;
                left: computed-vw(355);
                height: 100%;
                .play-title{
                    margin-top: computed-vw(30);
                    font-size: computed-vw(45);
                    overflow : hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    color: #333333;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .play-time{
                    font-size: computed-vw(36);
                    color: $gray-color;
                    position: absolute;
                    bottom: computed-vw(30);
                    margin: 0;
                }
            }
        }

    }

    .fab-ios-light{
        background-color:transparent;
        width: 8.89vw;
        height: 8.89vw;
        padding:0;

        .go-up-icon{
            width: 8.89vw;
            height: 8.89vw;
            max-width: none;
        }
    }
}
